<!--
lodash：库的使用
!安装依赖：
  npm/cnpm/pnpm install lodash防抖函数，用于限制高频事件的触发。
  npm/cnpm/pnpm  install --save-dev @types/lodash  安装防抖声明文件的指令
-->
<template>
  <div id="wrap">
    <h1>侦听模拟请求数据</h1>
    <input :disabled="isDisabled" v-model="WenTi" type="text" placeholder="请输入问题..." />
    <p>问题的结果：{{ DaAn }}</p>
  </div>
</template>

<script lang="ts">
export default {
  name: 'dayStuDemo33',
};
</script>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { debounce } from 'lodash';

// 定义接口响应的类型
interface ResData {
  //返回的数据
  data: string;
  //响应的信息
  msg: string;
  //接口状态码 @description 4000:失败  200：代表请求成功  5000:代表服务器挂了
  code: number | string;
}

// 模拟后端请求数据
function fetchDataDemo() {
  return new Promise<ResData>((resolve, reject) => {
    setTimeout(() => {
      resolve({
        data: '你的问题我现在还没有学会,请过两天再问问我,这几天我正在疯狂的吃数据!',
        msg: 'ok',
        code: 200,
      });
    }, 2000);
  });
}
//提出问题
const WenTi = ref('');
//问题的答案
const DaAn = ref('');
//禁用输入框
const isDisabled = ref(false);

//侦听结果
watch(
  WenTi,
  debounce(async (newValue: string, oldValue: string) => {
    console.log(newValue, 'newValue');
    console.log(oldValue, 'oldValue');
    //启用禁用
    isDisabled.value = true;
    //获取接口相应数据，并把数据部分解构出来
    const { data } = await fetchDataDemo();
    //把请求回的数据返回给答案
    DaAn.value = data;
    //取消禁用
    isDisabled.value = false;
  }, 1000),
);
</script>

<style lang="scss"></style>
